@import '~styles/settings';
$subnav-height: rem(40px);

.theme-subnav-small-light {
  height: $subnav-height;
  border-bottom: 0;

  @media screen and (min-width: $screen-m) {
    border-bottom: solid 1px $border;
  }

  .buttons {
    height: $subnav-height;
    padding: 0;

    li {
      width: 100%;
      max-width: none;
      border-left: 0 !important;
      border-right: 0 !important;

      > * {
        padding: 0 rem(26px);
        border-radius: 0;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;

        &.active {
          border-left: 1px solid rgba($slate, 0.2);
          border-right: 1px solid rgba($slate, 0.2);
        }
      }

      &:first-child > *.active {
        border-left: 1px solid transparent;
      }

      &:last-child > *.active {
        border-right: 1px solid transparent;
      }
    }
  }
}
